<template>
	<div v-if="detail">
		<button @click="show = true">目录</button>
		<!-- <u-navbar
			:title="detail.name"
			leftIconColor="#fff"
			placeholder
			bgColor="#a22921"
			titleStyle="color:#fff"
			@leftClick="leftClick"
		></u-navbar> -->
		<div class="m-pdf">
			<div id="pdf-content"></div>
		</div>

		<u-popup :show="show" @close="show = false" round="20rpx">
			<view class="content">
				<view class="flex justify-end" @click="show = false">
					<u-icon name="https://img.vrupup.com/web/hj/hjg/close.png" size="42rpx"></u-icon>
				</view>
				<view class="img_title flex">
					<image :lazy-load="true" :src="detail.imageUrl" mode="widthFix"></image>
					<text>{{ detail.name }}</text>
				</view>
				<view class="m-t-28">
					<view class="item" @click="change(item.num)" v-for="(item, index) in detail.contents" :key="index">
						{{ item.name }}
					</view>
				</view>
			</view>
		</u-popup>
	</div>
</template>
<script>
import Pdfh5 from 'pdfh5';
import 'pdfh5/css/pdfh5.css';
export default {
	name: 'Pdfh5',
	data() {
		return {
			pdfh5: null,
			show: false,
			detail: {},
			// 可引入网络文件或者本地文件
			pdfUrl: 'https://img.flyh5.cn/java/tidelive/1700098606174.pdf' // 如果引入本地pdf文件，需要将pdf放在public文件夹下，引用时使用绝对路径（/：表示public文件夹）
		};
	},
	onLoad(options){
		if(options.detail){
			this.detail = JSON.parse(decodeURIComponent(options.detail));
			console.log(this.detail,'-1--')
			this.$nextTick(()=>{
					this.initPdf();
			})
		}
		
	},
	methods: {
		change(e) {
			let goNum = parseInt(e) - 1
			this.pdfh5.goto(goNum)
			// this.initPdf(e)
			this.show = false;
		},
		
		initPdf(e) {
			console.log(this.detail,'-2--')
			// pdfh5实例化时传两个参数：selector选择器，options配置项参数，会返回一个pdfh5实例对象，可以用来操作pdf，监听相关事件
			// pdfh5 = new Pdfh5(selector, options) goto初始到第几页，logo设置每一页pdf上的水印
			this.pdfh5 = new Pdfh5('#pdf-content', {
				pdfurl: this.detail.pdfUrl,
				lazy: true,
				goto: e||0
				// 设置每一页pdf上的水印
				// logo: { src: require("@/assets/images/bus/icon_head@2x.png"), x: 420, y: 700, width: 120, height: 120 },
			});
			this.pdfh5.scrollEnable(true); // 允许pdf滚动
			// 监听pdf准备开始渲染，此时可以拿到pdf总页数
			this.pdfh5.on('ready', function () {
				console.log('总页数:' + this.totalNum);
			});
			// 监听pdf加载完成事件，加载失败、渲染成功都会触发
			this.pdfh5.on('complete', (status, msg, time) => {
				console.log('状态:' + status + '，信息:' + msg + '，耗时:' + time + '毫秒');
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.content {
	width: 750rpx;
	height: 1290rpx;
	padding: 30rpx;
	border-radius: 20rpx;
	background-color: #fffef9;
	.img_title {
		image {
			width: 184rpx;
			height: 130rpx;
			box-sizing: 0px 8rpx 12rpx 10rpx rgba(0, 0, 0, 0.2);
			margin-right: 30rpx;
		}
		text {
			width: 480rpx;
			color: #43423d;
			font-size: 38rpx;
			font-weight: 300;
		}
	}
}
.m-pdf{
	height: 80vh;
}
.item {
	width: 690rpx;
	height: 76rpx;
	margin-top: 40rpx;
	border-bottom: 1rpx solid #ededed;
	color: #43423d;
	font-size: 34rpx;
}
</style>
